<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>RGraph - Graph Operations</title>

<!-- CSS Files -->
<link type="text/css" href="../css/base.css" rel="stylesheet" />
<link type="text/css" href="../css/RGraph.css" rel="stylesheet" />

<!--[if IE]><script language="javascript" type="text/javascript" src="../../Extras/excanvas.js"></script><![endif]-->

<!-- JIT Library File -->
<script language="javascript" type="text/javascript" src="../../jit.js"></script>

<!-- Example File -->
<script language="javascript" type="text/javascript" src="example3.js"></script>
</head>

<body onload="init();">
<div id="container">

<div id="left-container">



<div class="text">
<h4>
Graph Operations    
</h4> 

            You can do the following operations with the RGraph<br /><br />
            1.- Removing subtrees or nodes<br /><br />
            2.- Removing edges<br /><br />
            3.- Adding another graph, also called sum<br /><br />
            4.- Morphing (or transforming) the graph into another one<br />
            
</div>

<div id="id-list"></div>


<div style="text-align:center;"><a href="example3.js">See the Example Code</a></div>            
</div>

<div id="center-container">
    <div id="infovis"></div>    
</div>

<div id="right-container">

<h4>Global Options</h4>

<table>
    <tr>
        <td>
            duration:
        </td>
        <td>
            <select id="select-duration">
                <option>1000</option>
                <option>1500</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>
            fps:
        </td>
        <td>
            <select id="select-fps">
                <option>10</option>
                <option selected="selected">30</option>
                <option>60</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>
            hide labels:
        </td>
        <td>
            <input type="checkbox" checked="checked" id="hide-labels" />
        </td>
    </tr>
    <tr>
        <td>
            <input type="button" value="Refresh" onclick="window.location = window.location" />
        </td>
    </tr>
</table>

<h4>1.- Remove Nodes</h4>

<table>
    <tr>
        <td>
            type:
        </td>
        <td>
            <select id="select-type-remove-nodes">
                <option>fade:seq</option>
                <option>fade:con</option>
                <option>iter</option>
                <option>replot</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>
            <input type="button" value="Remove" id="remove-nodes" />    
        </td>
        <td>
            <input type="button" value="Refresh" onclick="window.location = window.location" />
        </td>
    </tr>
</table>

<h4>2.- Remove Edges</h4>

<table>
    <tr>
        <td>
            type:
        </td>
        <td>
            <select id="select-type-remove-edges">
                <option>fade:seq</option>
                <option>fade:con</option>
                <option>iter</option>
                <option>replot</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>
            <input type="button" value="Remove" id="remove-edges" />    
        </td>
        <td>
            <input type="button" value="Refresh" onclick="window.location = window.location" />
        </td>
    </tr>
</table>

<h4>3.- Add Graph (Sum)</h4>

<table>
    <tr>
        <td>
            type:
        </td>
        <td>
            <select id="select-type-sum">
                <option>fade:seq</option>
                <option>fade:con</option>
                <option>replot</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>
            <input type="button" value="Sum" id="sum" />    
        </td>
        <td>
            <input type="button" value="Refresh" onclick="window.location = window.location" />
        </td>
    </tr>
</table>

<h4>4.- Morph</h4>

<table>
    <tr>
        <td>
            type:
        </td>
        <td>
            <select id="select-type-morph">
                <option>fade:con</option>
                <option>replot</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>
            <input type="button" value="Morph" id="morph" />    
        </td>
        <td>
            <input type="button" value="Refresh" onclick="window.location = window.location" />
        </td>
    </tr>
</table>

</div>

<div id="log"></div>
</div>
</body>
</html>
